<template>
    <div class="sixten">
        <img src="../img/QQ图片20211128155545_03.jpg" alt="">
        <ul>
            <li class="li" v-for="item in oneList2" :key="item.productName">
               <router-link :to="'/topic'+item.productId">
                    <div class="image">
                        <img :src="$store.state.imgsrc+item.productsImg" alt="">
                        <div class="only">仅需1元</div>
                    </div>
                    <p>{{item.productName}}</p>
                </router-link>
            </li>
        </ul>
        <div class="foot"></div>
    </div>
</template>

<script>
import {homeOne} from '@/api'
    export default {
        data(){
            return{
                oneList:[
                    {
                        img:'../img/u1.png',
                        name:'【百草味】百花果冻干 250g',
                        price:'1.0',
                        lastPrice:'268.0'
                    },
                    {
                        img:'../img/u1.png',
                        name:'【百草味】百花果冻干1 250g',
                        price:'1.0',
                        lastPrice:'268.0'
                    },
                    {
                        img:'../img/u1.png',
                        name:'【百草味】百花果冻干2 250g',
                        price:'1.0',
                        lastPrice:'268.0'
                    },
                    {
                        img:'../img/u1.png',
                        name:'【百草味】百花果冻干3 250g',
                        price:'1.0',
                        lastPrice:'268.0'
                    }
                ],
                oneList2:[]
            }
        },
         methods:{
            getHomeOne(){
                homeOne({
                    discounts:3
                }).then(res=>{
                    // console.log(res,'homeone')
                    this.oneList2 = res.data.data
                })
            }
        },
        mounted(){
            this.getHomeOne()
        }
    }
</script>

<style scoped>
img{
    width: 100vw;
    margin-top: 2vh;
}
ul{
    display: flex;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}
ul::-webkit-scrollbar{
        display: none;
    }
li img{
    width: 35vw;
    height: 18vh;
}
li{
    white-space:normal;
    width: 35vw;
    margin-right: 5vw;
}
li p{
    color: #333333;
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 1vh;
    margin-top: 2.5vh;
    text-align:center
}
.image{
    position: relative;
}
.only{
    position: absolute;
    background: red;
    height: 4vh;
    width: 20vw;
    bottom: -1vh;
    left: 7.5vw;
    border-radius: 4vh;
    color: white;
    text-align: center;
    line-height: 4vh;
    font-size: 14px;
}
.foot{
    margin-top: 2vh;
    width: 100vw;
    background: #eeeeee;
    height: 1vh;
}
</style>